<template>
  <div class="wrapper">
    <div class="titleWrapper">
      <div class="middleLine"></div>
      <div class="title">猜你喜欢</div>
    </div>
    <div class="contentWrapper">
      <YouLikeItem v-for="product in YouLike_list" :product="product" :key="product.id" />
    </div>
  </div>
</template>


<script>
import YouLikeItem from "./YouLikeItem";
export default {
  name: "youlike",
  props: {
    YouLike_list: Array || []
  },

  data() {
    return {};
  },
  components: {
    YouLikeItem
  },
  methods: {},
  beforeDestroy(){  //使用订阅要设置取消,不然会有BUG
    PubSub.unsubscribe('homeAddToCart')
  }
};
</script>


<style lang="less" scoped>
.wrapper {
  margin: 1rem 0.38rem 1rem 0.62rem;
  // background-color: #fff;

  .titleWrapper {
    position: relative;
    text-align: center;
    height: 2.5rem;

    .middleLine {
      padding-top: 1rem;
      margin-right: .2rem;
      border-bottom: solid 1px #d8d8d8;
    }
    .title {
      display: inline-block;
      position: relative;
      top: -1rem;
      font-size: 1.6rem;
      font-weight: bolde;
      padding: 0 1.5rem;
      background-color: #f5f5f5;
    }
  }

  .contentWrapper{
    margin-bottom: 50px;
  }
}
</style>